<template>
	<!--缺陷状态 -->
	<div>
		<div>
			<el-col :span="6">
				<el-input placeholder="请输入缺陷状态" v-model="stateDesc" clearable>
					<template slot="prepend">查询</template>
					<el-button slot="append" icon="el-icon-search" @click="GetBytypeDesc"></el-button>
				</el-input>
			</el-col>
			<el-col :span="4" :offset="14">
				<el-button @click="openDialog">新增<i class="el-icon-upload el-icon--right"></i> </el-button>
				<el-button @click="deleteByCheckBox">删除</el-button>
			</el-col>
		</div>
		<div>
			<el-table :data="pageInfo.records" border style="width: 100%" tooltip-effect="dark"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="stateId" label="编号">
				</el-table-column>
				<el-table-column prop="stateDesc" label="任务状态">
				</el-table-column>
				<el-table-column prop="moduleState" label="状态">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="disableBytypeId(scope.row.stateId)">
							{{scope.row.moduleState=='启用'?'禁用':'启用'}}
						</el-button>
						<el-button type="text" size="small" @click="deleted(scope.row.stateId)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog title="新增" :visible.sync="dialogVisible" width="30%">

				<el-form :model="state" ref="state" label-width="80px">
					<el-form-item label="任务状态" prop="stateDesc" :rules="{ required: true, message: '状态不能为空'}">
						<el-input v-model="state.stateDesc"></el-input>
					</el-form-item>
					<el-form-item label="状态">
						<el-radio v-model="state.moduleState" label="启用">启用</el-radio>
						<el-radio v-model="state.moduleState" label="禁用">禁用</el-radio>
					</el-form-item>
				</el-form>


				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="createType('state')">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		<div id="DS-Bottom">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageInfo.current" :page-sizes="[1, 2, 3, 4]" :page-size="pageInfo.size"
				layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: "defectstate",
		data() {
			return {
				stateDesc: "",
				current: 1,
				size: 3,
				pageInfo: {},
				checkeds: [],
				dialogVisible: false,
				state: {
					stateDesc: "",
					moduleState: ""
				},
				person: {}
			}
		},
		methods: {
			GetBytypeDesc() {
				this.GetType(this.current, this.size, this.stateDesc);
			},
			disableBytypeId(typeId) {
				this.$http.post("/defectState/disableBystateId", {
					stateId: typeId
				}).then(resp => {
					if (resp.data.code == 200) {
						this.$message({
							message: resp.data.message,
							type: 'success',
							duration: 1000
						})
						this.GetType(this.current, this.size, this.stateDesc);
					} else {
						this.$message({
							message: resp.data.message,
							type: 'error',
							duration: 1000
						})
					}
				})
			},
			deleteByCheckBox() {
				var a = new Array();
				this.checkeds.forEach((item => {
					a.push(item.stateId);
				}))
				this.$http.post("/defectState/removeBystateIds", {
					list: a
				}).then(resp => {
					if (resp.data.code == 200) {
						this.$message({
							message: resp.data.message,
							type: 'success',
							duration: 1000
						})
						this.GetType(this.current, this.size, this.typeDesc);
					} else {
						this.$message({
							message: resp.data.message,
							type: 'error',
							duration: 1000
						})
					}
				})
			},
			deleted(stateId) {
				this.$http.post("/defectState/removeStateBystateId", {
					stateId: stateId
				}).then(resp => {
					console.log(resp.data);
					if (resp.data.code == 200) {
						this.$message({
							message: resp.data.message,
							type: 'success',
							duration: 1000
						})
						this.GetType(this.current, this.size, this.typeDesc);
					} else {
						this.$message({
							message: resp.data.message,
							type: 'error',
							duration: 1000
						})
					}
				})
			},
			openDialog() {
				this.dialogVisible = true;

			},
			createType(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.dialogVisible = false;
						this.$http.post("/defectState/CreateState", {
							stateDesc: this.state.stateDesc,
							moduleState: this.state.moduleState,
							createBy: "longshichao",
						}).then(resp => {
							if (resp.data.code == 200) {
								this.$message({
									message: resp.data.message,
									type: 'success',
									duration: 1000
								})
								this.state.moduleState = "";
								this.state.stateDesc = "";
								this.GetType(this.current, this.size, this.typeDesc);
							} else {
								this.$message({
									message: resp.data.message,
									type: 'error',
									duration: 1000
								})
								this.state.moduleState = "";
								this.state.stateDesc = "";
							}
						})
					}else{
						this.$message({
							message: "请填写必填项",
							type: 'warning',
							duration: 1000
						})
						return false;
					}
				})
			},
			handleSizeChange(val) {
				this.size = val
				this.GetType(this.current, val, this.typeDesc);
			},
			handleCurrentChange(val) {
				this.current = val;

				this.GetType(val, this.size, this.typeDesc);
			},
			handleSelectionChange(val) {
				this.checkeds = val;
			},
			GetType(current, size, stateDesc) {
				this.$http.post("/defectState/GetState", {
					current: current,
					size: size,
					stateDesc: stateDesc
				}).then(resp => {
					this.pageInfo = resp.data.data;
				})
			}
		},
		created() {
			this.person = JSON.parse(localStorage.getItem("loginUser"));
			this.GetType(this.current, this.size, this.typeDesc);
		}
	}
</script>

<style>
	#DS-Bottom {
		position: absolute;
		text-align: right;
		bottom: 0;
		height: 35px;
		left: 0;
		right: 0;
	}
</style>
